<template>
<d2-container>
  <el-card class="carousel" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
       <el-form-item label="活动状态">
        <el-select v-model="queryData.status" filterable>
          <el-option label="全部" value="" />
          <el-option label="未开始" value="1" />
          <el-option label="进行中" value="2" />
          <el-option label="已结束" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="展示状态">
        <el-select v-model="queryData.state">
          <el-option label="全部" value="" />
          <el-option label="展示中" value="0" />
          <el-option label="禁止展示" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="queryData.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button type="primary" @click="addHandler">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="title" label="活动标题" />
       <el-table-column prop="top_pic" label="顶部图片">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.top_pic"
            style="width: 50px; height: 50px"
            :src="row.top_pic"
            :preview-src-list="[row.top_pic]"
          />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column label="已领取金额/奖池金额(元)">
        <template slot-scope="{ row }">
          <div>{{row.money_resum}} / {{row.money}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="money_day" label="每日限额(元)" />
      <el-table-column prop="join_num" label="参与人数" />
      <el-table-column prop="page_url" label="活动地址" />
      <el-table-column prop="state" label="展示状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" type="warning">禁止展示</el-tag>
          <el-tag v-else>展示中</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1">未开始</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">进行中</el-tag>
          <el-tag v-else type="warning">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dateline" label="添加时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="margin-right:10px" @click="editHandler(scope.row)">编辑</el-button>
          <el-popconfirm
            :title="`您确定要${(scope.row.state ? '展示' : '禁止展示')}？`"
            @onConfirm="toggleHandler(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">{{ scope.row.state ? '展示' : '禁止展示' }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
    <el-dialog :title="dialogFormTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px" >
        <el-form-item label="活动标题：" prop="title">
          <el-input v-model="formData.title" placeholder="请输入活动标题" />
        </el-form-item>
        <el-form-item label="背景颜色：" prop="bg_color">
          <el-color-picker v-model="formData.bg_color"></el-color-picker>
        </el-form-item>
         <el-form-item label="顶部图片：" prop="top_pic">
          <upload v-model="formData.top_pic" tips="建议上传尺寸: 宽度750，高度不限"></upload>
        </el-form-item>
        <el-form-item label="活动日期：" prop="dates">
          <el-date-picker
          v-model="formData.dates"
          unlink-panels
          @change="getdate"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否开启设备号：" prop="is_device">
          <el-radio-group v-model="formData.is_device">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
        <el-form-item label="语音口令：" prop="voice_text">
          <el-input v-model="formData.voice_text" :maxlength="50" placeholder="建议不超过50个字" />
        </el-form-item>
        <el-form-item label="口令识别度(%)：" prop="similar">
          <el-input-number v-model="formData.similar" :min="0" :max="100" :precision="0" ></el-input-number>
        </el-form-item>
        <el-form-item label="展示方式：" prop="voice_show">
          <el-radio-group v-model="formData.voice_show">
          <el-radio :label="0">直接展示</el-radio>
          <el-radio :label="1">分享展示</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item label="分享海报：" prop="post_pic">
        <upload v-model="formData.post_pic" tips="上传尺寸建议 宽度750高度不限， 大小 200KB以内"></upload>
      </el-form-item>
        <el-form-item label="赞助商：" prop="sponsor">
          <el-input v-model="formData.sponsor" placeholder="请输入赞助商" />
        </el-form-item>
        <el-form-item label="奖池金额(元)：" prop="money">
          <el-input  type="number" :min="0" v-model="formData.money" @change="moneymin" placeholder="请输入奖池金额，保留2位小数" />
        </el-form-item>
        <el-form-item label="每日限制(元)：" prop="money_day">
          <el-input-number v-model="formData.money_day" :precision="2" :min="0.01" ></el-input-number>
        </el-form-item>
        <el-form-item label="奖励设置：">
          <div class="qubox" v-for="(item,index) in formData.money_set" :key="index">
            <div>
              <el-form-item label="最小值(元)" prop="min" label-width="80px">
                <el-input-number v-model="item.min" :min="0" ></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="最大值(元)" prop="max" label-width="100px">
                <el-input-number v-model="item.max" :min="0" ></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="概率(%)" prop="scale" label-width="100px">
                <el-input-number v-model="item.scale" :precision="2" :min="0" ></el-input-number>
              </el-form-item>
            </div>
            <div style="margin-left:20px" @click="delbtn(index)">
              <el-form-item>
                <i class="el-icon-remove delsty"></i>
              </el-form-item>
            </div>
            <div v-if="index == maxlen" @click="addbtn(item)">
              <el-form-item>
                <i class="el-icon-circle-plus addsty"></i>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
         <el-form-item label="到账方式：" prop="money_get">
          <el-radio-group v-model="formData.money_get">
          <el-radio :label="0">app余额</el-radio>
          <el-radio :label="1">微信余额</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="红包发放备注：" prop="mark">
          <el-input  v-model="formData.mark" :maxlength="50" placeholder="例如：语音红包奖励(不超过50个字)" />
        </el-form-item>
      <el-form-item label="技术支持：" prop="bottom_text">
          <el-input v-model="formData.bottom_text" placeholder="例如：西蜀网技术支持(非必填)" />
        </el-form-item>
        <el-form-item label="是否展示活动介绍：" prop="show_detail">
          <el-radio-group v-model="formData.show_detail">
          <el-radio :label="0">展示</el-radio>
          <el-radio :label="1">不展示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.show_detail === 0" label="活动介绍标题：" prop="detail_title">
          <el-input v-model="formData.detail_title" placeholder="请输入活动介绍标题" />
        </el-form-item>
      <el-form-item v-if="formData.show_detail === 0" label="活动介绍详情：" prop="detail">
        <ueditor v-model="formData.detail"></ueditor>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import Ueditor from '@/components/Ueditor' // ES6 Module
import { GetList, addEdit, getInfo, stateEdit } from '@/api/page' // 查询添加修改删除的http请求接口
export default {
  name: 'Winner',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  components: {
    Ueditor
  },
  data () {
    return {
      queryData: {
        state: '',
        status: '',
        title: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogFormVisible: false,
      dialogFormTitle: '',
      formData: {
        id: '',
        title: '',
        top_pic: '',
        bg_color: '',
        dates: [],
        start_time: '',
        end_time: '',
        is_device: 0,
        voice_text: '',
        similar: 100,
        voice_show: 0,
        post_pic: '',
        sponsor: '',
        show_detail: 0,
        detail_title: '',
        detail: '',
        money: '',
        money_day: '',
        money_get: 0,
        money_set: [
          { min: '', max: '', scale: '' }
        ],
        bottom_text: '',
        mark: ''
      },
      tableLoading: false,
      submitLoading: false,
      maxlen: 0,
      rules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        top_pic: [
          { required: true, message: '请上传顶部图片', trigger: 'blur' }
        ],
        voice_text: [
          { required: true, message: '请输入语音口令', trigger: 'blur' }
        ],
        similar: [
          { required: true, message: '请输入口令识别度', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入奖池金额', trigger: 'blur' }
        ],
        money_day: [
          { required: true, message: '请输入每日限额', trigger: 'blur' }
        ],
        join_num: [
          { required: true, message: '请输入参加人数', trigger: 'blur' }
        ],
        post_pic: [
          { required: true, message: '请上传分享海报', trigger: 'blur' }
        ],
        sponsor: [
          { required: true, message: '请输入赞助商', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination, queryData } = this
      const { title, state, status } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, title, status, state).then(res => {
        const { list = [], pagination } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler () {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    resetForm () {
      delete this.formData.id
      this.$refs.form.resetFields()
      let addstr = [
        {
        min: '',
        max: '',
        scale: ''
      }
      ]
      this.formData.money_set = addstr
    },
    addHandler () {
      this.dialogFormTitle = '添加'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    editHandler({ id }) {
      this.dialogFormTitle = `编辑`
      getInfo(id).then(res => {
        this.dialogFormVisible = true
        this.maxlen = res.info.money_set.length - 1
        this.$nextTick(() => {
          this.formData = { ...res.info }
          // this.formData.dates = [res.info.start_time, res.info.end_time]
        }) 
      })
    },
    submitHandler () {
      this.$refs.form.validate((valid) => {
        valid && this._setCarouselList()
      })
    },
    _setCarouselList () {
      const { formData } = this
      const { show_detail, detail_title, detail  } = formData
      if (show_detail === 0){
        if( detail_title === '' || detail === '') {
          this.$message('请完善活动信息');
          return
        }
      }
      this.submitLoading = true
      addEdit({ ...formData }).then(res => {
        this._getTableData()
        this.dialogFormVisible = false
      }).finally(() => {
        this.submitLoading = false
      })
    },
    toggleHandler (row) {
      const data = Object.assign({}, row)
      data.state = Math.pow(0, row.state)
      this.formData = data
      this._stateCarouselList()
    },
    _stateCarouselList () {
      const { formData } = this
      this.submitLoading = true
      stateEdit({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    addbtn (item) {
      const { min, max, scale } = item
      if (min == '' || max == '' || scale == '') {
        this.$message({
          message: '请完善奖励设置信息',
          type: 'warning'
        })
        return
      }
      let addstr = {
        min: '',
        max: '',
        scale: ''
      }
      this.formData.money_set.push(addstr)
      this.maxlen = this.maxlen + 1
    },
    delbtn (index) {
      if (this.formData.money_set.length > 1) {
        this.maxlen = this.maxlen - 1
        this.formData.money_set.splice(index, 1)
      } else {
        this.$message({
          message: '至少留有一个选项',
          type: 'warning'
        })
      }
    },
    getdate (val) {
      if (val) {
        this.formData.start_time = val[0]
        this.formData.end_time = val[1]
      }
    },
    moneymin (val) {
      this.formData.money = Math.floor(val * 100) / 100
    }
  }
}
</script>
<style>
.imgbox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:60px;
    height: 60px;
    margin: 0 8px 8px 0;
    display: inline-block;
    box-sizing:border-box
}
.imgitem{
  margin-right: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: cover;
}
.logimg{
  width: 160px;
  height: 160px;
  background-size: cover;
}
.qubox{
  display: flex;
  align-items: center;
  margin-top: -7px;
}
.delsty{
  margin-top: 10px;
  font-size: 30px;
  color: #f56c6c;
}
.addsty{
  margin-top: 10px;
  font-size: 30px;
  color: #409eff;
}
</style>
